<template>
  <div style="z-index:998">
    <LogMenu></LogMenu>
    <Navigation></Navigation>
    <div class="servers">
      <div class="servers-back">
      </div>
      <div class="servers_container">
        <div class="title">节点列表</div>
        <div class="server-list" style="width: 100%;">
          <li class="server-item" v-for="(i,key) in server" style="width: 100%;display: flex;margin-top: 5px;">
            <div class="logo" v-if="i.online" style="position: relative;display: block">
              <div style="display: flex">
                <a-icon class="server-icon" style=" color: lightgreen;" type="desktop" />
                <div>
                  <h1 class="item-title-center" style="color: lightgreen">在线</h1>
                  <h1 class="item-title-center" style="font-size: 3px!important;color: #699dff">{{i.location.address}}</h1>
                </div>
              </div>
              <h1 class="item-title-left">IP地址:{{i.bindIp}}</h1>
              <h1 class="item-title-left">端口号:{{i.bindPort}}</h1>
              <h1 class="item-title-left">正在执行任务:{{i.currentRun}}</h1>
            </div>
            <div class="logo" v-if="i.online==false" style="position: relative;display: block">
              <div style="display: flex">
                <a-icon name="test" class="server-icon" style=" color: lightslategray;" type="desktop" />
                <h1 class="item-title-center" style="color: lightslategray">离线</h1>
                <h1 class="item-title-center" style="color: lightgreen">{{i.location.address}}</h1>
              </div>
              <h1 class="item-title-left">IP地址:{{i.bindIp}}</h1>
              <h1 class="item-title-left">端口号:{{i.bindPort}}</h1>
              <h1 class="item-title-left">正在执行任务:{{i.currentRun}}</h1>
            </div>
            <RingGraph class="margin-t50" :getData="i.cpuInfo" title="CPU使用情况" />
            <RingGraph class="margin-t50" :getData="i.memoryInfo" title="内存使用情况" />
          </li>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import wsEvents from "../wsEvents";
import {CloudServerOutlined} from 'ant-design-vue';
import RingGraph from '../echart/RingGraph'
import { Icon } from 'ant-design-vue';
import LogMenu from "../common/LogMenu";
import Navigation from "../common/Navigation";
export default {
  name: "console",
  components:{
    Navigation,
    'RingGraph': RingGraph,
    'a-icon':Icon,
    LogMenu
  },
  data(){
    return {
      msg: [],
      server: {}
    }
  },
  mounted() {
  },
  created() {
    app.register(wsEvents.events.ON_WS_RECORD_NODES,(msg)=>{
      for(let key in msg){
        let i=msg[key]
        if(!i.IsInit) {
          continue
        }
        this.server[i.UniqueId]={
          online: true,
          bindIp: i.BindIp,
          runTask: 5,
          bindPort: i.BindPort,
          currentRun: i.RunningTask,
          cpuInfo: [
            {value: i.CpuNum, name: "核心数", color: "rgb(1,209,253)"},
            {value: (i.CpuNum*i.UsedCpu/100).toFixed(2), name: "已使用", color: 'rgb(5,127,241)'},
          ],
          memoryInfo: [
            {value: i.Memory, name: "总内存", color: "rgb(1,209,253)"},
            {value: i.FreeMemory, name: "剩余内存", color: 'rgb(5,127,241)'},
          ],
          location:i.Location
        }
      }
      this.updatePoint()
      this.$forceUpdate()
    })
    app.register(wsEvents.events.ON_WS_NOTICE_DISCONNECTION,(uniqueId)=>{
      if (this.server[uniqueId]){
        this.server[uniqueId].online=false;
      }
      this.updatePoint()
    })
    app.register(wsEvents.events.ON_WS_DISCONNECT,()=>{
      for (let i in this.server){
        let item=this.server[i]
        item.online=false
      }
      this.updatePoint()
    })
    app.register(wsEvents.events.ON_PUSH_TASK,(msg)=>{
      this.console("主节点:向目标节点"+msg["descIp"]+"推送了任务"+"任务编号:"+msg["taskId"])
    })
  },
  updated() {
    this.move()
  },
  methods:{
    updatePoint(){
      for (let uniqueId in this.server){
        let i=this.server[uniqueId]
        app.trigger(wsEvents.events.ON_ADD_SERVER,uniqueId,i['location']['lng'],i['location']['lat'],i.online)
      }
    },
    console(msg){
      this.msg.push(msg)
    },
    move(){
      let ele=document.querySelector("#content")
        ele.scrollTop = ele.scrollHeight;
    }
  }
}
</script>

<style scoped>
.console{
  position: fixed;
  width: 300px;
  height: 300px;
  border-radius: 5px;
  right: 10px;
  bottom: 0;
  background-color: #527878;
  opacity: 0.4;
}
.console-main{
  position: fixed;
  width: 300px;
  height: 300px;
  border-radius: 5px;
  right: 0;
  bottom: 0;
}
.title{
  position: relative;
  margin: 0 auto;
  width: 100px;
  text-align: center;
  color: white;
  font-size: 15px;
}
.console-main .content{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: scroll;
  padding: 10px 10px;
}
.console-main .content::-webkit-scrollbar { width: 0 !important }
.console-main .content .msg{
  word-break:break-all;
  position: relative;
  width: 90%;
  left: 5px;
  color: white;
  text-align: left;
  border: 1px solid #2c3e50;
  padding: 5px 5px;
  border-radius: 2px;
  font-size: 12px;
  margin-top: 5px;
  animation: showMsg 0.5s ease-in-out;
}
.servers{
  position: fixed;
  left: 10px;
  top:100px;
  width: 430px;
  height: 300px;
}
.servers-back{
  position: fixed;
  width: 430px;
  height: 300px;
  left: 10px;
  top:100px;
  border-radius: 5px;
  background-color: #527878;
  opacity: 0.4;
  color: green;
}
.servers_container{
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}
.servers_container::-webkit-scrollbar { width: 0 !important }
.server-item{
  border:1px solid lightslategray;
  padding: 5px 5px;
  margin-top: 10px;
}
.server-item .logo{
  display:flex;
  align-items:center;
  justify-content:center;
}
.server-icon{
  width: 40px;
  height: 40px;
  font-size: 40px;
  display: block
}
.item-title-center{
  width: 100%;
  color: white;
  font-size: 8px;
  text-align: center;
  display:flex;
  align-items:center;
  justify-content:center;
}
.item-title-left{
  display: block;
  width: 100%;
  color: white;
  font-size: 8px;
  text-align: left;
}
@keyframes showMsg {
  0%{left: -100px}
  100%{left :5px}
}
</style>
